<template>
	<div>
		<div>
			<span><i class="el-icon-search el-icon--right"></i> 筛选查询</span>
			&nbsp;&nbsp;
			登记时间:
			<el-date-picker v-model="startime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
				style="width: 150px;">
			</el-date-picker>到
			<el-date-picker v-model="endtime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
				style="width: 150px;">
			</el-date-picker>
			&nbsp;&nbsp;
			项目:
			<el-select v-model="projectname" placeholder="请选择" style="width: 100px;" clearable>
				<el-option v-for="item in project" :key="item.defectId" :label="item.projectName"
					:value="item.defectId">
				</el-option>
			</el-select>
			&nbsp;&nbsp;
			状态:
			<el-select v-model="sstate" placeholder="请选择" style="width: 100px;" clearable>
				<el-option v-for="item in state" :key="item.stateId" :label="item.stateDesc" :value="item.stateDesc">
				</el-option>
			</el-select>
			&nbsp;&nbsp;
			<el-button @click="Findit">查询<i class="el-icon-search el-icon--right"></i></el-button>
			<el-button @click="addDefectRecord">新增<i class="el-icon-plus el-icon--right"></i></el-button>
			<el-button @click="deleteRecords">删除<i class="el-icon-delete el-icon--right"></i></el-button>
		</div>
		<br>
		<!-- 新增 -->
		<div>
			<el-dialog title="新增项目缺陷" :visible.sync="outerVisible" width="400px">
				<div>
					<el-form ref="form" :model="addproject" label-width="80px">
						<el-form-item label="项目名称">
							<el-select v-model="addproject.projectName" placeholder="请选择" clearable>
								<el-option v-for="item in Allproject" :key="item.projectId" :label="item.projectName"
									:value="item.projectName">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="父级缺陷">
							<el-select v-model="addproject.parentDefectId" placeholder="请选择" clearable>
								<el-option v-for="item in defects" :key="item.defectId" :label="item.defectName"
									:value="item.defectId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="缺陷名称">
							<el-input v-model="addproject.defectName"></el-input>
						</el-form-item>
						<el-form-item label="缺陷描述">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="addproject.defectDesc">
							</el-input>
						</el-form-item>
						<el-form-item label="完成要求">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="addproject.doneCondition">
							</el-input>
						</el-form-item>
						<el-form-item label="缺陷分类">
							<el-select v-model="addproject.defectType" placeholder="请选择" clearable>
								<el-option v-for="item in Alltype" :key="item.typeId" :label="item.typeDesc"
									:value="item.typeDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="严重程度">
							<el-select v-model="addproject.defectSevsrity" placeholder="请选择" clearable>
								<el-option v-for="item in Severitys" :key="item.severityId" :label="item.severityDesc"
									:value="item.severityDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="优先级">
							<el-select v-model="addproject.defectPriority" placeholder="请选择" clearable>
								<el-option v-for="item in prioritys" :key="item.priorityId" :label="item.priorityDesc"
									:value="item.priorityDesc" :auto-upload="false">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="预计工时">
							<el-input v-model="addproject.planWorkHours"></el-input>
						</el-form-item>
						<el-form-item label="计划开始时间" label-width="100px">
							<el-date-picker v-model="addproject.planStartTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="计划结束时间" label-width="100px">
							<el-date-picker v-model="addproject.planEndTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="附件上传">
							<el-upload class="upload-demo" ref="upload" action="http://localhost:80/attach/uploadFill"
								multiple :limit="3" name="fileName" :on-success="success">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
					</el-form>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="outerVisible = false">取 消</el-button>
					<el-button type="primary" @click="addpro">确定</el-button>
				</div>
			</el-dialog>
		</div>
		<div>
			<el-table ref="multipleTable" :data="defectrecord" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="defectId" label="编号">
				</el-table-column>
				<el-table-column prop="projectName" label="项目名称">
				</el-table-column>
				<el-table-column prop="defectName" label="缺陷名称" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="parentDefectId" label="父缺陷">
					<template slot-scope="scope">
						<span>{{scope.row.parentDefectId==0?'':scope.row.parentDefectId}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="defectPriority" label="优先级">
				</el-table-column>
				<el-table-column prop="defectSevsrity" label="严重程度">
				</el-table-column>
				<el-table-column prop="defectType" label="缺陷类别">
				</el-table-column>
				<el-table-column prop="issueState" label="状态">
				</el-table-column>
				<el-table-column prop="assignee" label="指派">
					<template slot-scope="scope">
						<span>{{scope.row.assignee==null?'暂未指派':scope.row.assignee}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="planEndTime" label="计划完成时间">
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<div v-if="scope.row.assignee==null">
							<el-button @click="editById(scope.row.defectId)" type="text" size="small">编辑</el-button>
							<el-button type="text" size="small" @click="DeleteRecordById(scope.row.defectId)">删除
							</el-button>
						</div>
						<div v-if="scope.row.assignee!=null">
							<el-button type="text" size="small" @click="GetRecordById(scope.row.defectId)">查看
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 查看 -->
			<el-dialog title="查看缺陷" :visible.sync="LookMessage" width="30%">

				<el-form ref="form" :model="DefectMessage" label-width="150px">
					<el-form-item label="项目名称:">
						<span>{{DefectMessage.projectName}}</span>
					</el-form-item>
					<el-form-item label="父级缺陷:">
						<span>{{DefectMessage.parentDefectName==null?'无':DefectMessage.parentDefectName}}</span>
					</el-form-item>
					<el-form-item label="缺陷名称:">
						<span>{{DefectMessage.defectName}}</span>
					</el-form-item>
					<el-form-item label="缺陷分类:">
						<span>{{DefectMessage.defectType}}</span>
					</el-form-item>
					<el-form-item label="状态:">
						<span>{{DefectMessage.issueState}}</span>
					</el-form-item>
					<el-form-item label="严重程度:">
						<span>{{DefectMessage.defectSevsrity}}</span>
					</el-form-item>
					<el-form-item label="优先级:">
						<span>{{DefectMessage.defectPriority}}</span>
					</el-form-item>
					<el-form-item label="预期工时:">
						<span>{{DefectMessage.planWorkHours}}</span>
					</el-form-item>
					<el-form-item label="完成率:">
						<span>{{DefectMessage.doneRatio}}%</span>
					</el-form-item>
					<el-form-item label="计划开始时间:">
						<span>{{DefectMessage.planStartTime}}</span>
					</el-form-item>
					<el-form-item label="计划结束时间:">
						<span>{{DefectMessage.planEndTime}}</span>
					</el-form-item>
					<el-form-item label="缺陷描述:">
						<span>{{DefectMessage.defectDesc}}</span>
					</el-form-item>
					<el-form-item label="缺陷要求:">
						<span>{{DefectMessage.doneCondition}}</span>
					</el-form-item>
					<el-form-item label="附件下载:">
						<span><a :href="DefectMessage.attachDesc">{{DefectMessage.attachOldname}}</a></span>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="LookMessage = false">取 消</el-button>
				</span>
			</el-dialog>
			<!-- 修改 -->
			<el-dialog title="修改项目缺陷" :visible.sync="editVisible" width="400px">
				<div>
					<el-form ref="form" :model="editMessage" label-width="100px">
						<el-form-item label="项目名称">
							<el-select v-model="editMessage.projectName" placeholder="请选择" clearable>
								<el-option v-for="item in Allproject" :key="item.projectId" :label="item.projectName"
									:value="item.projectName">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="父级缺陷">
							<el-select v-model="editMessage.parentDefectId" placeholder="请选择" clearable>
								<el-option v-for="item in defects" :key="item.defectId" :label="item.defectName"
									:value="item.defectId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="缺陷名称">
							<el-input v-model="editMessage.defectName"></el-input>
						</el-form-item>
						<el-form-item label="缺陷描述">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="editMessage.defectDesc">
							</el-input>
						</el-form-item>
						<el-form-item label="完成要求">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="editMessage.doneCondition">
							</el-input>
						</el-form-item>
						<el-form-item label="缺陷分类">
							<el-select v-model="editMessage.defectType" placeholder="请选择" clearable>
								<el-option v-for="item in Alltype" :key="item.typeId" :label="item.typeDesc"
									:value="item.typeDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="严重程度">
							<el-select v-model="editMessage.defectSevsrity" placeholder="请选择" clearable>
								<el-option v-for="item in Severitys" :key="item.severityId" :label="item.severityDesc"
									:value="item.severityDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="优先级">
							<el-select v-model="editMessage.defectPriority" placeholder="请选择" clearable>
								<el-option v-for="item in prioritys" :key="item.priorityId" :label="item.priorityDesc"
									:value="item.priorityDesc" :auto-upload="false">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="预计工时">
							<el-input v-model="editMessage.planWorkHours"></el-input>
						</el-form-item>
						<el-form-item label="计划开始时间" label-width="100px">
							<el-date-picker v-model="editMessage.planStartTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="计划结束时间" label-width="100px">
							<el-date-picker v-model="editMessage.planEndTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="重新上传附件">
							<el-upload class="upload-demo" ref="upload" action="http://localhost:80/attach/uploadFill"
								multiple :limit="3" name="fileName" :on-success="success">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
					</el-form>

				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="changeRecord">确定</el-button>
				</div>
			</el-dialog>



			<div id="DS-Bottom">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageInfo.current" :page-sizes="[1, 2, 3, 4]" :page-size="pageInfo.size"
					layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "defectlist",
		data() {
			return {
				startime: "",
				endtime: "",
				projectname: null,
				defectdesc: "",
				defects: [],
				project: [],
				url: "",
				multipleSelection: [],
				Severitys: [],
				prioritys: [],
				Allproject: [],
				Alltype: [],
				addproject: {
					projectName: "",
					doneCondition: "",
					parentDefectId: "",
					defectName: "",
					defectType: "",
					defectDesc: "",
					defectPriority: "",
					defectSevsrity: "",
					planWorkHours: "",
					planStartTime: "",
					planEndTime: "",
					attachId: 0
				},
				state: [],
				sstate: null,
				outerVisible: false,
				current: 1,
				size: 3,
				defectrecord: [],
				pageInfo: {},
				LookMessage: false,
				DefectMessage: {},

				editMessage: {},
				editVisible: false
			}
		},
		methods: {
			deleteRecords(){
				var a=this.multipleSelection.map(item=>item.defectId);
				console.log(a);
				this.$http.post("/defectRecord/deleteRecords",{list:a}).then(resp=>{
					if(resp.data.code==200){
						this.$message({
							message:resp.data.message,
							type:'success',
							duration:1000
						})
						this.GetDefectList(this.current, this.size, this.projectname, this.sstate, this.startime, this.endtime);
					}
				})
			},
			changeRecord() {
				this.$http.post("/defectRecord/changeRecord", this.editMessage).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.message,
							type: 'success',
							duration: 1000
						});
						this.editVisible = false;
						this.GetDefectList(this.current, this.size, this.projectname, this.sstate, this.startime,
							this.endtime);
					}
				})
			},
			editById(defectId) {
				this.editVisible = true;
				this.$http.post("/defectRecord/editById", {
					defectId: defectId
				}).then(resp => {
					console.log(resp.data);
					this.editMessage = resp.data.data;
				})
			},

			DeleteRecordById(defectId) {
				this.$http.post("/defectRecord/DeleteRecordById", {
					defectId: defectId
				}).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.message,
							type: 'success',
							duration: 1000
						});
						this.GetDefectList(this.current, this.size, this.projectname, this.sstate, this.startime,
							this.endtime);
					}

				})
			},

			GetRecordById(defectId) {
				this.LookMessage = true;
				this.$http.post("/defectRecord/GetDefectProjectById", {
					defectId: defectId
				}).then(resp => {
					console.log(resp.data.data)
					this.DefectMessage = resp.data.data
				})
			},

			handleSizeChange(val) {
				this.size = val;
				this.GetDefectList(this.current, val, this.projectname, this.sstate, this.startime, this.endtime);

			},

			handleCurrentChange(val) {
				this.current = val;
				this.GetDefectList(val, this.size, this.projectname, this.sstate, this.startime, this.endtime);
			},

			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

			success(resp) {
				this.addproject.attachId = resp.data;
				this.editMessage.attachId = resp.data;
			},

			addpro() {
				this.$http.post("/defectRecord/createdefectproject", this.addproject).then(resp => {
					if(resp.data.code==200){
						this.$message({
							message: resp.data.message,
							type: 'success',
							duration: 1000
						})
						this.addproject.projectName = "",
							this.addproject.doneCondition = "",
							this.addproject.parentDefectId = "",
							this.addproject.defectName = "",
							this.addproject.defectType = "",
							this.addproject.defectDesc = "",
							this.addproject.defectPriority = "",
							this.addproject.defectSevsrity = "",
							this.addproject.planWorkHours = "",
							this.addproject.planStartTime = "",
							this.addproject.planEndTime = "",
							this.addproject.attachId = 0
						this.outerVisible = false;
						this.GetDefectList(this.current, this.size, this.projectname, this.sstate, this.startime, this
							.endtime);
					}else{
						this.$message({
							message: resp.data.message,
							type: 'error',
							duration: 1000
						})
					}
				})

			},

			GetProject() {
				this.$http.get("/defectRecord/GetAllproject").then(resp => {
					// console.log(resp.data.data)
					this.Allproject = resp.data.data
				});
				this.$http.get("/defectType/GetAllType").then(resp => {
					this.Alltype = resp.data.data
				});
				this.$http.get("/defectRecord/GetAllDefect").then(resp => {
					this.defects = resp.data.data
				})
			},

			addDefectRecord() {
				this.outerVisible = true

			},

			Findit() {
				this.GetDefectList(this.current, this.size, this.projectname, this.sstate, this.startime, this.endtime);
			},

			GetDefectList(current, size, projectname, sstate, startime, endtime) {

				this.$http.post("/defectRecord/GetAllDefectRecords", {
					current: current,
					size: size,
					defectId: projectname,
					issueState: sstate,
					startime: startime,
					endtime: endtime
				}).then(resp => {
					this.pageInfo = resp.data.data;
					this.defectrecord = resp.data.data.records
				});
			},

			Getinfo() {
				this.$http.get("/defectRecord/GetAllDefectProject").then(resp => {
					this.project = resp.data.data;
				})
				this.$http.get("/defectState/GetAllDefectState").then(resp => {
					this.state = resp.data.data;
				})
				this.$http.get("/defectPriority/getAllPrioritys").then(resp=>{
					this.prioritys=resp.data.data;
				})
				this.$http.get("/defectSeverity/getAllSeveritys").then(resp=>{
					this.Severitys=resp.data.data;
				})
			}
		},
		created() {
			this.GetDefectList(this.current, this.size, this.projectname, this.sstate, this.startime, this.endtime);
			this.Getinfo();
			this.GetProject();
      
		}
	}
</script>

<style>
	#DS-Bottom {
		position: absolute;
		text-align: right;
		bottom: 0;
		height: 35px;
		left: 0;
		right: 0;
	}
</style>
